import IconRefresh from '../../components/IconRefresh.vue';
import {markRaw} from 'vue';
import PinYin from 'js-pinyin';

export default function field({t}) {
    return [
        {
            type: 'row',
            props: {gutter: 5},
            children: [
                {
                    type: 'col',
                    props: {span: 12},
                    children: [
                        {
                            type: 'input',
                            field: 'field',
                            value: '',
                            title: t('form.field'),
                            inject: true,
                            link:['title'],
                            update(val, rule, fApi){
                                rule.props.disabled = false;

                                fApi.nextTick(()=>{
                                    // 绑定数据模型
                                    var isBind = fApi.activeRule.isBind ? true: false;
                                    if (isBind){
                                        rule.props.disabled = true;
                                        return;
                                    }

                                    var ruleTitle = fApi.activeRule.title;
                                    if (ruleTitle!=''){
                                        // 获取拼音首字母
                                        PinYin.setOptions({checkPolyphone:false,charCase:0});
                                        var firstLetter = PinYin.getCamelChars(ruleTitle);

                                        // 替换特殊字符
                                        var pattern = new RegExp("[`~%!@#^=''?~！@#￥……&——‘”“'？*()（），,。.、]");
                                        var fieldName ="";
                                        for(var i=0;i<firstLetter.length;i++){
                                            fieldName+=firstLetter.substr(i,1).replace(pattern,'');
                                        }

                                        // 设置字段ID
                                        rule.value = fieldName;
                                    }
                                })
                            }
                        },
                        {type: 'input',field: 'table',title: '表名',value: '', hidden: true},
                    ]
                },
                {
                    type: 'col',
                    props: {span: 12},
                    children: [
                        {
                            type: 'input',
                            field: 'title',
                            value: '',
                            title: t('form.title'),
                            inject: true,
                            props: {
                                clearable: true,
                            },
                        },
                        {type: 'switch',field: 'isBind',title: '绑定',value: false, hidden: true},
                    ]
                }
            ]
        },
        // {
        //     type: 'input',
        //     field: 'info',
        //     value: '',
        //     title: t('form.info'),
        // }, 
        // {
        //     type: 'Struct',
        //     field: '_control',
        //     value: [],
        //     title: t('form.control'),
        //     props: {
        //         defaultValue: [],
        //         validate(val) {
        //             console.log(val)
        //             if (!Array.isArray(val)) return false;
        //             if (!val.length) return true;
        //             return !val.some(({rule}) => {
        //                 return !Array.isArray(rule);
        //             });
        //         }
        //     }
        // }, 
        // {
        //     type: 'col',
        //     props: {
        //         span: 24
        //     },
        //     children: [
        //         {
        //             type: 'el-button',
        //             props: {
        //                 type: 'primary',
        //                 size: 'small',
        //             },
        //             inject: true,
        //             on: {
        //                 click({$f}) {
        //                     const rule = $f.activeRule;
        //                     if (rule) {
        //                         rule.__fc__.updateKey();
        //                         rule.value = undefined;
        //                         rule.__fc__.$api.sync(rule);
        //                     }
        //                 },
        //             },
        //             native: true,
        //             children: [{type: 'i', class: 'jd-icon icon-delete'}, t('form.clear')]
        //         }, {
        //             type: 'el-button',
        //             props: {
        //                 type: 'success',
        //                 size: 'small',
        //                 icon: markRaw(IconRefresh),
        //             },
        //             inject: true,
        //             on: {
        //                 click({$f}) {
        //                     const rule = $f.activeRule;
        //                     if (rule) {
        //                         rule.__fc__.updateKey(true);
        //                         rule.__fc__.$api.sync(rule);
        //                     }
        //                 },
        //             },
        //             native: true,
        //             children: [t('form.refresh')]
        //         },
        //     ]
        // }
    ];
}
